<template>
  <view class="box">
    <!-- logo -->
    <view class="logo">
      <view>
        <image
          src="https://img.ixintu.com/upload/jpg/20210524/4d701ad487e28c7ae2c97184064c65e9_67077_800_800.jpg!con"
          mode=""
        />
      </view>
    </view>
    <!-- logo结束 -->

    <!-- 登录-->
    <view class="login">
      <view class="input-phone">
        <input
          type="number"
          placeholder="请输入手机号码"
          v-model="phone"
          @blur="toCheckIsPhone"
        />
      </view>
      <view class="input-phone">
        <input
          v-if="!isSight"
          type="password"
          placeholder="请输入密码"
          v-model="pwd"
        />
        <input v-else type="text" placeholder="请输入密码" v-model="pwd" />
        <i
          @tap="changeIsSight"
          class="iconfont"
          :class="[isSight ? 'icon-eye' : 'icon-eye-slash']"
          @keydown.enter="login"
        ></i>
      </view>

      <view class="negotiation" style="margin-bottom: 15rpx">
        <checkbox-group @change="loginBoxChange">
          <checkbox :value="checkLoginSave" :checked="isAgreeSave" />
          <text>保存账号信息</text>
        </checkbox-group>
      </view>
      <view class="negotiation">
        <checkbox-group @change="checkboxChange">
          <checkbox :value="checkVal" :checked="isAgree" />
          <text>我同意《用户登录》协议</text>
        </checkbox-group>
      </view>
      <view class="entry" @tap="login">
        <view>登 录</view>
      </view>
    </view>
    <!-- 登录结束 -->
    <!-- 其它登录 -->
    <view class="otherLoginText" @tap="clickOtherLogin" v-if="otherLogin"
      >其它方式登录&nbsp;&nbsp;&gt;</view
    >
    <transition name="moveDisappear">
      <view v-if="!otherLogin" class="otherLogin">
        <view class="box_image">
          <view
            v-for="item in otherLoginWay"
            :key="item.id"
            :data-index="item.id"
            @tap="gotoOtherLogin"
          >
            <image :src="item.icon" mode="aspectFit" />
          </view>
        </view>
      </view>
    </transition>
    <!-- 展示图片-->
  </view>
</template>

<script>
import { loginUsePhoneAndPassword } from "@/api";
import { setToken } from "@/utils/token.js";

export default {
  name: "Login",
  data() {
    return {
      isAgree: false,
      checkVal: "0",
      checkLoginSave: "",
      isAgreeSave: false,
      phoneIsError: false,
      phone: "13871868443",
      pwd: "2188856043zzh..",
      isSight: false,
      otherLogin: true,
      otherLoginWay: [
        {
          id: 1,

          icon: require("../../static/wx.png"),
        },
        {
          id: 2,
          icon: require("../../static/dx.png"),
        },
        {
          id: 3,
          icon: require("../../static/qq1.png"),
        },
      ],
    };
  },

  methods: {
    toCheckIsPhone(e) {
      if (this.phone == "") {
        return;
      }
      let regex =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!regex.test(this.phone)) {
        this.phoneIsError = true;
        uni.showToast({
          title: "手机号格式错误",
          duration: 2000,
          icon: "error",
        });
      } else {
        this.phoneIsError = false;
      }
    },

    //改变密码是否可见
    changeIsSight(e) {
      this.isSight = !this.isSight;
    },

    // 改变同意使用协议的选项框
    checkboxChange(e) {
      this.isAgree = !this.isAgree;
    },

    //改变自动保存
    loginBoxChange(e) {
      this.isAgreeSave = !this.isAgreeSave;
    },

    // 点击登录按钮
    async login(e) {
      let { isAgree, phone, phoneIsError, pwd, isAgreeSave } = this;
      if (!isAgree) {
        this.getErrorMessge("请先同意用户协议");
      } else if (phone == "") {
        this.getErrorMessge("手机号不能为空");
      } else if (pwd == "") {
        this.getErrorMessge("密码不能为空");
      } else if (phoneIsError) {
        this.getErrorMessge("手机号格式错误");
      } else {
        //发送请求获取用户登录信息
        try {
          if (isAgreeSave) {
            uni.setStorageSync("phone", phone);
          }
          let data = await loginUsePhoneAndPassword(phone, pwd);
          // 将token存储到本地存储中
          // console.log(222);
          if (data.code != 200) {
            uni.showToast({
              title: data.msg,
              duration: 2000,
            });
          }
          if (data.code == 200) {
            uni.switchTab({
              url: "/pages/home/index",
            });
          }
          setToken(data.token);
          //保存用户id用于获取用户id
          uni.setStorageSync("userId", data.profile.userId);
          uni.setStorageSync("cookie", data.cookie);
          console.log(data);
        } catch (error) {}
      }
    },

    //定义方法用于展示提示信息，封装了提示信息
    getErrorMessge(msg) {
      uni.showToast({
        title: msg,
        duration: 2000,
        icon: "error",
      });
    },

    //点击其它登录按钮
    clickOtherLogin(e) {
      this.otherLogin = !this.otherLogin;
    },

    gotoOtherLogin(e) {
      //对点击的页面进行路由导航
      console.log(e);
      let index = e.currentTarget.dataset.index;
      if (index == 1 || index == 3) {
        uni.showToast({
          icon: "error",
          title: "该登录方式未启用,请使用短信登录",
          duration: 2000,
        });
      } else if (index == 2) {
        uni.navigateTo({
          url: `./captcha/index?phone=${this.phone}`,
        });
      }
    },
  },

  computed: {},

  // 页面加载的生面周期函数
  onLoad() {
    let phone = uni.getStorageSync("phone") || this.phone;
    this.phone = phone;
    if (phone) {
      this.isAgreeSave = true;
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    view {
      width: 280rpx;
      height: 280rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-top: 150rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .login {
    display: flex;
    justify-content: center;
    justify-items: center;
    flex-wrap: wrap;
    margin-top: 100rpx;

    // 手机输入框的高
    @input-height: 100rpx;
    .input-phone:hover {
      border: 1rpx solid rgb(107, 107, 255);
    }
    .input-phone {
      position: relative;
      width: 80%;
      height: @input-height;
      background-color: #f3f4f6;
      border-radius: calc(@input-height / 2);
      margin-bottom: 40rpx;
      border: 1rpx solid transparent;
      input {
        width: 100%;
        height: 100%;
        text-align: center;
        color: #000000;
        font-weight: 800;
      }
      i {
        font-size: 48rpx;
        position: absolute;
        top: 28rpx;
        right: 50rpx;
      }
    }

    // 游客登录
    .entry {
      width: 80%;
      height: @input-height;
      background-color: #fc3a3a;
      border-radius: calc(@input-height / 2);
      margin-top: 60rpx;
      view {
        width: 100%;
        height: 100%;
        color: #ffffff;
        text-align: center;
        line-height: @input-height;
        font-size: 36rpx;
        font-weight: 800;
      }
    }

    // 同意协议
    .negotiation {
      width: 80%;
      height: @input-height / 2;
      checkbox {
        width: 20rpx;
        height: 80%;
      }
      text {
        margin-left: 40rpx;
      }
    }
  }

  .otherLoginText {
    display: flex;
    justify-content: center;
    margin-top: 220rpx;
  }

  .otherLogin {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 180rpx;

    .box_image {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 80%;
      height: 100rpx;
      // background-color: yellow;
      view {
        width: 100rpx;
        height: 100%;
        border-radius: 50%;
        background-color: #f3f4f6;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .moveDisappear-enter,
  .moveDisappear-leave-to {
    transform: translateY(100%);
  }
  /* 整个元素的进入和离开的过程，谁做动画给谁加 */
  .moveDisappear-enter-active,
  .moveDisappear-leave-active {
    transition: 0.3s linear;
  }
  /* 进入的终点、离开的起点 */
  .moveDisappear-enter-to,
  .moveDisappear-leave {
    transform: translateX(0);
  }
}
</style>